<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        * {
            margin: 0;
            padding: 0
        }

         :focus {
            outline: none
        }

        #header {
            background: #fff;
            height: 50px;
            background-color: #fc6d4d;
            width: 100%;
        }

        #back {
            float: left;
            width: 10%;
        }

        #back img {
            width: 16px;
            height: 16px;
            margin: 17px
        }

        #wen {
            width: 80%;
            text-align: center;
            float: left;
            display: table;
        }

        #wen h4 {
            color: #fff;
            line-height: 50px;
            font-size: 14px
        }

        #search {
            width: 10%;
            float: right
        }

        #search img {
            width: 16px;
            height: 16px;
            margin: 17px;
            margin-left: 0;
        }

        #xm_cont {
            margin-top: 240px;
            border-top: 1px solid #F5F5F5;
            padding-bottom: 20px;
            border-bottom: 1px solid #F5F5F5;
        }

        #xm_cont .title {
            font-size: 14px;
            height: 52px;
            background: #FFF
        }

        #xm_cont .title span {
            display: block;
            float: left;
            width: 3px;
            height: 12px;
            background: #666666;
            line-height: 52px;
            margin-left: 15px;
            margin-right: 12px;
            margin-top: 20px
        }

        #xm_cont .title h3 {
            float: left;
            line-height: 52px;
            color: #333333;
        }

        #xm_cont .cont_n {
            width: 90%;
            margin: 5px auto;
            color: #999;
            font-size: 14px;
            line-height: 2em
        }

        #tp_cont {
            margin-top: 10px;
            border-bottom: 1px solid #F5F5F5;
            padding-bottom: 105px
        }

        #tp_cont .title {
            font-size: 14px;
            height: 52px;
            background: #FFF
        }

        #tp_cont .title span {
            display: block;
            float: left;
            width: 3px;
            height: 12px;
            background: #666666;
            line-height: 52px;
            margin-left: 15px;
            margin-right: 12px;
            margin-top: 20px
        }

        #tp_cont .title h3 {
            float: left;
            line-height: 52px;
            color: #333333;
        }

        #tp_cont .cont_n {
            width: 90%;
            margin: 3px auto;
            color: #999;
            font-size: 14px;
            line-height: 2em
        }

        #tp_cont .cont_n img {
            float: left;
            width: 30%;
            height: 94px;
            margin: 5px
        }

        #lxr_cont {
            border-bottom: 1px solid #F5F5F5;
            padding-bottom: 80px
        }

        #lxr_cont .title {
            font-size: 14px;
            height: 52px;
            background: #FFF
        }

        #lxr_cont .title span {
            display: block;
            float: left;
            width: 3px;
            height: 12px;
            background: #666666;
            line-height: 52px;
            margin-left: 15px;
            margin-right: 12px;
            margin-top: 20px
        }

        #lxr_cont .title h3 {
            float: left;
            line-height: 52px;
            color: #333333;
        }

        #lxr_cont .cont_n {
            width: 90%;
            margin: 3px auto;
            color: #999;
            font-size: 14px;
        }

        #lxr_cont .cont_n .tou {
            width: 58px;
            height: 58px;
            float: left;
        }

        #lxr_cont .cont_n .tou img {
            width: 58px;
            height: 58px;
            border-radius: 50%
        }

        #lxr_cont .cont_n .cont_n_c {
            float: left;
            margin-left: 20px
        }

        #lxr_cont .cont_n .cont_n_c h4 {
            color: #333333;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 8px;
            display: inline-block;
        }

        #lxr_cont .cont_n .cont_n_c img {
            display: inline-block;
            vertical-align: middle;
            width: 50px;
            height: 13px;
        }

        #lxr_cont .cont_n .cont_n_c .dizhi {
            margin-top: 8px
        }

        #lxr_cont .cont_n .cont_n_c .dizhi span {
            display: block;
            float: left;
        }

        #lxr_cont .cont_n .cont_n_c .dizhi span img {
            width: 12px;
            height: 12px;
            margin-top: 2px
        }

        .clearfix {
            clear: both;
        }

        button {
            width: 90%;
            height: 40px;
            text-align: center;
            color: #FFF;
            background: #fc8622;
            margin: 15px auto;
            margin-left: 5%;
            border-radius: 10px
        }
    </style>
</head>

<body>



    <div id="tuoche_cont">
        <div>
            <div id="xm_cont">
                <div class="title">
                    <span></span>
                    <h3>店家信息</h3>
                </div>
                <div class="cont_n">
                    <p>{{djxx}}</p>
                </div>
            </div>


            <div id="tp_cont">
                <div class="title">
                    <span></span>
                    <h3>服务图片</h3>
                </div>
                <div class="cont_n">
                    <img :src="img1" @click="fangda(img1)">

                    <img :src="img2" @click="fangda(img2)">


                    <img :src="img3" @click="fangda(img3)">
                    <div class="clearfix"></div>
                </div>
            </div>

            <div id="lxr_cont">
                <div class="title">
                    <span></span>
                    <h3>联系人</h3>
                </div>
                <div class="cont_n">
                    <div class="tou">
                        <img :src="touxiang">
                    </div>
                    <div class="cont_n_c">
                        <h4>{{name}}</h4>
                        <img class="le" src="../../image/renzheng.png" v-if="ren">
                        <div class="dizhi">
                            <span><img src="../../image/dizhi.png" alt="">&nbsp;</span>
                            <span>{{dizhi}}    &nbsp;&nbsp;&nbsp;&nbsp;</span>

                            <span>距离你{{juli}}KM</span>
                        </div>
                    </div>

                </div>
            </div>
            <button @click="call(dianhua)" tapmode>拨打电话</button>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function() {
      //沉浸
      var header = $api.byId('header');
      headerH = $api.fixStatusBar(header);
 console.log(api.frame)
        keyback()
            //接收id
        id = api.pageParam.id;
        console.log(id)
        //后请求数据
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });

        //沉浸
        var header = $api.byId('header');
        headerH = $api.fixStatusBar(header);


        api.setRefreshHeaderInfo({
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#fff',
            textColor: '#333',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            ajax();

        });
        //地图
        ajax();

        //vue
        showtc = new Vue({
            el: '#tuoche_cont',
            data: {
                djxx: '美瑞特挖掘机维修，10年挖掘机维修经验，100余名挖掘机修理技师，价值300万的挖掘机维修设备。1500台∕次挖掘机维修案例，擅长卡特、小松、日立、沃尔沃、现代等等。',

                touxiang: "",
                name: "",
                dizhi: "",
                juli: "",
                dianhua: "",
                ren: false,
                img1: '',
                img2: '',
                img3: '',
            }

        });



    };
    var headerH, map, id;


    function ditu(lat,lon) {

        map = api.require('bMap');
        map.open({
            rect: {
                x: 20,
                y: headerH + 10,
                w: api.winWidth - 40,
                h: 200
            },
            center: {
                lon: lon,
                lat: lat
            },
            zoomLevel: 16,
            showUserLocation: true,
            fixedOn: api.frameName,
            fixed: false

        }, function(ret) {
            if (ret.status) {
                console.log('地图打开成功');
            }
        });
        map.setMapAttr({
            scrollEnable: false
        });
        //大头针
        map.addAnnotations({
            annotations: [{
                id: 1,
                lon: lon,
                lat: lat
            }],

            draggable: true
        });
    }


    function photoview() {

    }


    function qiehuan() {
        shoucang = $api.byId('soucang');
        console.log();
        if ($api.attr(shoucang, 'alt') == 1) {
            $api.attr(shoucang, 'src', '../../image/collection_n.png');
            $api.attr(shoucang, 'alt', '2');
            api.toast({
                msg: '收藏成功',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            $api.attr(shoucang, 'src', '../../image/collection.png');
            $api.attr(shoucang, 'alt', '1');
            api.toast({
                msg: '取消成功',
                duration: 2000,
                location: 'bottom'
            });
        }

    }


    function call(phone) {

        api.call({
            type: 'tel_prompt',
            number: phone
        });
    }


    function back() {
        // map.close();
        api.closeWin();
    }

    function fangda(data) {
        api.openWin({
            name: 'zhfwfdpic',
            url: 'zhfwfdpic.html',
            pageParam: {
                img: data
            }
        });

    }

    function ajax() {
        api.ajax({
            url: $api.getStorage("backapi") + '/index.php?s=zonghe&c=home&m=show_ajax&uid=' + id + '&id=' + $api.getStorage("member"),
            method: 'get',
        }, function(ret, err) {
            if (ret) {
                showtc.touxiang = ret.status.touxiang;
                showtc.name = ret.status.name;
                showtc.dizhi = ret.status.dizhi;
                showtc.juli = ret.status.juli;
                showtc.djxx = ret.status.djxx;

                showtc.ren = ret.status.ren;
                showtc.dianhua = ret.status.phone;
                // ditu()
                ditu(ret.status.lat, ret.status.lon);
                console.log(JSON.stringify(ret));
                api.hideProgress();
                jilu();
            } else {
                console.log(JSON.stringify(err));
            }
        });


    }


    function jilu() {
        api.ajax({
            url: $api.getStorage("backapi") + '/uploadfile/zhengjian/' + id + '/1/800x800.jpeg',
            method: 'GET',
        }, function(ret, err) {
            if (err.statusCode == '200') {
                showtc.img1 = $api.getStorage("backapi") + '/uploadfile/zhengjian/' + id + '/1/800x800.jpeg'
            }
        });

        api.ajax({
            url: $api.getStorage("backapi") + '/uploadfile/zhengjian/' + id + '/2/800x800.jpeg',
            method: 'GET',
        }, function(ret, err) {
            if (err.statusCode == '200') {
                //  console.log(JSON.stringify(ret));
                showtc.img2 = $api.getStorage("backapi") + '/uploadfile/zhengjian/' + id + '/2/800x800.jpeg'
            }
            //  console.log(JSON.stringify(ret));
            //    console.log(JSON.stringify(err));
        });

        api.ajax({
            url: $api.getStorage("backapi") + '/uploadfile/zhengjian/' + id + '/3/800x800.jpeg',
            method: 'GET',
        }, function(ret, err) {
            if (err.statusCode == '200') {

                showtc.img3 = $api.getStorage("backapi") + '/uploadfile/zhengjian/' + id + '/3/800x800.jpeg'

            }
        });

        api.hideProgress();
        api.refreshHeaderLoadDone()

    }

    function keyback() {
        api.addEventListener({
            name: 'bkeyback'
        }, function(ret, err) {
            if (ret) {
                api.closeWin({});

            } else {

            }
        });
    }
</script>

</html>
